<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/assets/amazeui/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/assets/ztree/css/metroStyle/metroStyle.css"/>
    <link rel="stylesheet" href="/assets/iziModal/css/iziModal.css"/>
</head>
<body>

<div class="am-g am-margin-top-lg">
    <div class="am-u-sm-3 am-u-sm-offset-9 am-text-right am-u-end">
        <div class="am-input-group am-input-group-sm">
            <input id="i_search" type="text" class="am-form-field am-input-sm" placeholder="输入角色名称"/>
            <span class="am-input-group-btn">
                            <button class="am-btn  am-btn-primary am-btn-sm am-icon-search" type="button" onclick="searchQuery();"></button>
                        </span>
        </div>
    </div>
</div>

<table width="100%" class="am-table am-table-striped am-table-bordered
            am-table-compact am-text-nowrap am-table-hover" id="table">
    <thead>
    <tr class="am-text-center">
        <td>编号</td>
        <td>名称</td>
        <td>标识</td>
        <td>描述</td>
        <td>创建时间</td>
        <td>创建人</td>
        <td>排序号</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody class="am-text-center"></tbody>
</table>
<@shiro.hasPermission name="role:add">
<div class="am-g">
    <div class="am-u-sm-12">
        <button class="am-btn am-btn-secondary am-radius am-btn-xs" onclick="toAdd();">新增角色</button>
    </div>
</div>
</@shiro.hasPermission>

<div id="modal-edit" class="iziModal">
    <div><br/></div>
    <div class="am-g">
        <form class="am-form am-form-horizontal">
                <input type="hidden" id="i_roleId" name="roleId"/>
            <div class="am-form-group">
                <label for="i_name" class="am-u-sm-2 am-form-label">角色名称</label>
                <div class="am-u-sm-10">
                    <input type="text" id="i_name" placeholder="输入角色名称">
                </div>
            </div>
            <div class="am-form-group">
                <label for="i_tag" class="am-u-sm-2 am-form-label">角色标识</label>
                <div class="am-u-sm-10">
                    <input type="text" id="i_tag" placeholder="输入角色标识">
                </div>
            </div>
            <div class="am-form-group">
                <label for="i_description" class="am-u-sm-2 am-form-label">描述</label>
                <div class="am-u-sm-10">
                    <input type="text" id="i_description" placeholder="输入备注">
                </div>
            </div>
            <div class="am-form-group">
                <label for="i_orderNum" class="am-u-sm-2 am-form-label">排序号</label>
                <div class="am-u-sm-10">
                    <input type="number" id="i_orderNum" placeholder="输入排序号">
                </div>
            </div>
            <div class="am-form-group am-text-center">
                <button class="am-btn am-btn-default submit">提交</button>
            </div>
        </form>
    </div>
</div>

<div id="look-permission" class="iziModal">
    <div class="am-g">
        <div class="am-u-sm-12 am-margin-top-sm am-text-center">
            <div>
                <ui id="lookPermissionTree" class="ztree"></ui>
            </div>
        </div>
    </div>
</div>

<div id="edit-permission" class="iziModal">
    <div class="am-g">
        <div class="am-u-sm-12 am-margin-top">
            <ui id="editPermissionTree" class="ztree"></ui>
        </div>
        <div class="am-u-sm-12 am-text-center am-margin-bottom-lg">
            <button class="am-btn am-btn-secondary am-radius am-btn-xs submit">保存</button>
        </div>
    </div>
</div>

<script src="/assets/iziModal/js/jquery-2.2.4.js"></script>
<script src="/assets/iziModal/js/iziModal.js"></script>
<script src="/assets/amazeui/js/amazeui.js"></script>
<script src="/assets/amazeui/js/amazeui.datatables.min.js"></script>
<script src="/assets/ztree/js/jquery.ztree.all.js"></script>
<script>

var table;
var selectRoleId;
$(function () {
    loadTable();
    init();
});

function init() {
    $("#modal-edit").iziModal({
        title: 'title',
        icon: 'icon-star',
        headerColor: '#00af66',
        width: 600,
        transitionIn: 'bounceInUp',
        transitionOut: 'bounceOutDown',
        focusInput: true,
        overlayClose: false,
        closeOnEscape: false,
        openFullscreen: false
    });

    $("#modal-edit").on('click','.submit',function(event){
        event.preventDefault();
        var roleId = $("#i_roleId").val();
        var name = $("#i_name").val();
        var tag = $("#i_tag").val();
        var description = $("#i_description").val();
        var orderNum = $("#i_orderNum").val();
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: '/sys/role/save',
            data: {
                roleId: roleId,
                name: name,
                tag: tag,
                description: description,
                orderNum: orderNum
            },
            success: function (result) {
                if(result.code!=0){
                    alert(result.errMsg);
                }else{
                    $("#modal-edit").iziModal('close');
                    table.draw(false);
                }
            }
        });
    });

    $("#look-permission").iziModal({
        title: 'title',
        icon: 'icon-star',
        headerColor: '#00af66',
        width: 500,
        transitionIn: 'bounceInUp',
        transitionOut: 'bounceOutDown',
        focusInput: true,
        overlayClose: false,
        closeOnEscape: false,
        openFullscreen: false
    });

    $("#edit-permission").iziModal({
        title: 'title',
        icon: 'icon-star',
        headerColor: '#00af66',
        width: 500,
        transitionIn: 'bounceInUp',
        transitionOut: 'bounceOutDown',
        focusInput: true,
        overlayClose: false,
        closeOnEscape: false,
        openFullscreen: false
    });
    $("#edit-permission").on('click','.submit',function(event){

        event.preventDefault();

        //获取权限树中的选中项
        var treeObj = $.fn.zTree.getZTreeObj("editPermissionTree");
        var nodes = treeObj.getCheckedNodes(true);

        var permissionIds = '';
        $.each(nodes,function(index,value){
            permissionIds = permissionIds + ',' + value.id;
        });
        if(permissionIds.length>0){
            permissionIds = permissionIds.substr(1);
        }
        if(!selectRoleId){
            return;
        }
        $.ajax({
            type: 'post',
            url: '/sys/role/setPermission',
            data: {
                roleId: selectRoleId,
                permissionIds: permissionIds
            },
            dataType: 'json',
            success: function(result){
                if(result.code==0){
                    $("#edit-permission").iziModal('close');
                }else{
                    alert(result.errMsg);
                }
            }
        })

    });
}

function lookPermissions(roleId){
    $.ajax({
        type: 'post',
        dataType: 'json',
        url: '/sys/role/lookPermissions',
        data: {
            roleId: roleId
        },
        success: function (result) {
            if(!result || !result.data || result.data.length==0){
                alert("该角色还没有配置权限");
                return;
            }
            var noteArr = new Array();
            $.each(result.data,function(index,obj){
                var node = {};
                node.id = obj.permissionId;
                node.pId = obj.parentId;
                node.name = obj.name;
                if(obj.type!=3){
                    node.isParent = true;
                    node.open = true;
                }else{
                    node.isParent = false;
                }
                noteArr[index] = node;
            });
            var setting = {
                view: {
                    selectedMulti: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };
            $.fn.zTree.init($("#lookPermissionTree"), setting, noteArr);
            $("#look-permission").iziModal('setTitle',"查看权限");
            $("#look-permission").iziModal('open');
        }
    });
};

function editPermissions(roleId) {

    $.ajax({
        type: 'post',
        dataType: 'json',
        url: '/sys/role/editPermissions',
        data: {
            roleId: roleId
        },
        success: function (result) {
            if (!result || !result.data || result.data.length == 0) {
                alert("系统中暂时还没有可用的权限");
                return;
            }
            selectRoleId = roleId;
            var noteArr = new Array();
            $.each(result.data, function (index, obj) {
                var node = {};
                node.id = obj.permissionId;
                node.pId = obj.parentId;
                node.name = obj.name;
                if (obj.type != 3) {
                    node.isParent = true;
                    node.open = true;
                } else {
                    node.isParent = false;
                }
//                //禁用
//                node.chkDisabled = true;

                if(obj.hasPermission==1){
                    node.checked = true;
                }else{
                    node.checked = false;
                }

                noteArr[index] = node;
            });
            var setting = {
                view: {
                    selectedMulti: false
                },
                check: {
                    enable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };
            $.fn.zTree.init($("#editPermissionTree"), setting, noteArr);
            $("#edit-permission").iziModal('setTitle', "设置权限");
            $("#edit-permission").iziModal('open');
        }
    });
}

function searchQuery() {
    table.ajax.reload();
}

function toDel(roleId){
    var confirm = window.confirm("是否删除该角色");
    if(confirm){
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: '/sys/role/toDel',
            data: {
                roleId: roleId
            },
            success: function (result) {
                if(result.code==1){
                    alert(result.errMsg);
                }
                table.draw(false);
            }
        });

    }
}

function toAdd() {
    $("#i_roleId").val('');
    $("#i_name").val('');
    $("#i_tag").val('');
    $("#i_description").val('');
    $("#i_orderNum").val('');
    $("#modal-edit").iziModal('setTitle','新增角色');
    $("#modal-edit").iziModal('open');
}

function edit(row) {
    $("#i_roleId").val(row.roleId);
    $("#i_name").val(row.name);
    $("#i_tag").val(row.tag);
    $("#i_description").val(row.description);
    $("#i_orderNum").val(row.orderNum);
    $("#modal-edit").iziModal('setTitle','修改角色');
    $("#modal-edit").iziModal('open');
}

function loadTable() {
    table = $("#table").DataTable({
        ordering: false,
        bLengthChange: false,
        ordering: false,
        bSort: false,
        serverSide: true,
        searching: false,
        iDisplayLength: 10,
        ajax: {
            url: "/sys/role/queryList",
            data: function (d) {
                var key = $("#i_search").val();
                if(key){
                    d.key = key;
                }
            }
        },
        columns: [
            {data: "roleId"},
            {data: "name"},
            {data: "tag"},
            {data: "description"},
            {data: "createTime"},
            {data: "createMemberName"},
            {data: "orderNum"},
            {
                data: 'op',
                render: function (data,type,row,meta){
                    var btn = "<div>" +
                    <@shiro.hasPermission name="role:edit">
                    "<button onclick='edit("+JSON.stringify(row)+");' class='am-btn-xs am-btn am-radius am-btn-secondary'>修改</button> " +
                    </@shiro.hasPermission>
                    <@shiro.hasPermission name="role:delete">
                    "<button onclick='toDel("+row.roleId+");' class='am-btn-xs am-btn am-radius am-btn-warning'>删除</button> " +
                    </@shiro.hasPermission>
                    "<button onclick='lookPermissions("+row.roleId+");' class='am-btn-xs am-btn am-radius am-btn-success'>查看权限</button> " +
                    <@shiro.hasPermission name="role:edit">
                    "<button onclick='editPermissions("+row.roleId+");' class='am-btn-xs am-btn am-radius am-btn-secondary'>配置权限</button>" +
                    </@shiro.hasPermission>
                    "</div>";

                    return btn;
                }
            }
        ]
    });
}
</script>
</body>
</html>